<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '实践云课堂',
  },
}
</route>

<script setup>
import ContentBox from '@/components/ContentBox.vue'
import NewVideo from '@/components/NewVideo/index.vue'
import PracticeApi from '@/service/practice'
import { uniNavigateTo } from '@/utils'
import { Base64 } from 'js-base64'

const loadOptions = ref({
  id: '',
  resourceType: '',
})
onLoad((options) => {
  const { id, resourceType } = options
  if (id) {
    loadOptions.value = {
      id,
      resourceType,
    }
    getCourseById()
    readCourse()
  }
})

const needWebview = computed(() => {
  return !['video', 'image'].includes(loadOptions.value.resourceType)
})

const courseInfo = ref({
  name: '',
  resourceUrl: '',
  note: '', // 介绍
  readCount: '', // 观看次数
  createTime: '',
})

const getCourseById = async () => {
  const { code, result } = await PracticeApi.getCourseById({
    id: loadOptions.value.id,
  })
  if (code === 200) {
    courseInfo.value = result
  }
}

const readCourse = async () => {
  await PracticeApi.readCourse({
    id: loadOptions.value.id,
  })
}

const imageSwiperList = computed(() => {
  if (
    loadOptions.value.resourceType === 'image' &&
    courseInfo.value.resourceUrl
  ) {
    return courseInfo.value.resourceUrl.split(',')
  }
  return []
})

const prevSrc = 'https://admin.lhwhlt.cn/preview/onlinePreview?url='

const goWebview = () => {
  const url = prevSrc + Base64.encode(courseInfo.value.resourceUrl)
  const u = encodeURIComponent(url)
  uniNavigateTo(`/pages-sub/web/index?url=${u}&title=${courseInfo.value.name}`)
}
</script>

<template>
  <view class="common-page-bg">
    <view class="p-24rpx">
      <view
        v-if="needWebview && courseInfo.coverUrl"
        class="mb-24rpx"
      >
        <wd-img
          custom-class="w-full h-400rpx"
          round
          radius="16rpx"
          :src="courseInfo.coverUrl"
          :preview-src="courseInfo.coverUrl"
          enable-preview
          mode="aspectFill"
        />
      </view>
      <view
        v-else
        class="media-box"
      >
        <!-- <NewVideo
          v-if="loadOptions.resourceType === 'video'"
          :src="courseInfo.resourceUrl"
          :autoplay="true"
          :custom="false"
          :init-fullscreen="false"
          height="100%"
        /> -->
        <!-- <wd-swiper
        v-if="loadOptions.resourceType === 'image'"
        :list="imageSwiperList"
        autoplay
        :indicator="{ type: 'dots-bar' }"
      ></wd-swiper> -->
        <video
          v-if="loadOptions.resourceType === 'video'"
          :src="courseInfo.resourceUrl"
          class="w-full h-400rpx"
        ></video>
        <wd-img
          v-if="loadOptions.resourceType === 'image'"
          :src="courseInfo.resourceUrl"
          custom-class="w-full h-400rpx"
          round
          radius="16rpx"
          enable-preview
        />
      </view>
      <ContentBox>
        <view class="info">
          <view class="info-title ellipsis">{{ courseInfo.name }}</view>
          <view class="flex justify-between items-center">
            <view class="info-desc">发布时间：{{ courseInfo.createTime }}</view>
            <view class="info-desc">观看次数：{{ courseInfo.readCount }}</view>
          </view>
        </view>
      </ContentBox>
      <view class="h-24rpx"></view>
      <ContentBox
        v-if="courseInfo.note"
        title="介绍"
      >
        <view class="content">
          {{ courseInfo.note }}
        </view>
      </ContentBox>
    </view>

    <view
      v-if="needWebview"
      class="float-btn"
    >
      <wd-button
        custom-class="common-main-btn"
        @click="goWebview"
      >
        查看文件详情
      </wd-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.info {
  &-title {
    margin-bottom: 32rpx;
    font-size: 36rpx;
    font-weight: 500;
    color: $uni-text-color;
  }

  &-desc {
    font-size: 24rpx;
    color: $uni-text-color-grey;
  }
}

.content {
  font-size: 28rpx;
  color: $uni-text-color;
}

.media-box {
  position: relative;
  margin-bottom: 24rpx;
}

.float-btn {
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 400rpx;
}
</style>
